<script setup>
import { reactive } from 'vue'

const title = '欢迎来到江西信息应用职业技术学院！'
const string = '欢迎使用Vue.js'
const flag = true
const str = `<span class="font-bold">${title}</span>`

const student = reactive({
  name: 'Hina',
  gender: '女'
})
const span = `<span class="${student.gender === '女' ? 'text-red-500' : 'text-blue-500'}">${student.name}</span>`
</script>

<template>
  <p v-html="flag ? '欢迎使用Vue.js' : str"></p>
  <div v-html="span"></div>
  <div :class="student.gender === '女' ? 'text-red-500' : 'text-blue-500'">{{ student.name }}</div>
</template>

<style>
.font-bold {
  font-weight: 700;
}
</style>
